<template>
  <div class="els-row">
    <label>{{ attrs.label }}</label>
    <div class="els__content">
      <Ele
        :attrs="attrs"
        v-model:checkedKeys="model[attrs.field]"
        v-model:value="model[attrs.field]"
        v-model:checked="model[attrs.field]"
        v-model:file-list="model[attrs.field]"
      >
        <template v-if="attrs.slotName" #[attrs.slotName]>
          <slot :name="attrs.slotName"></slot>
        </template>
      </Ele>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const attrs = ref({});
const model = ref({});

watch(
  () => props.config,
  (val) => {
    attrs.value = {
      ...val,
      type: "Select",
    };
  },
  {
    deep: true,
    immediate: true,
  }
);

</script>
<style scoped lang="scss">
.els-row {
  label {
    display: block;
    text-align: right;
    margin-right: 10px;
  }
  display: flex;
  align-items: center;
}
:deep(.els__content) {
  flex: 1;
}
:deep(.ant-select) {
  width: 100%;
}
</style>
